<!--

  一个带小三角形序号标签

  // 带*号表示必填属性
  props: 
    background:(RGB || HEX || var(...))        背景颜色

  slot: 
    default:        默认插槽

  demo: 
    <qm-sort background="#fdcc07">3</qm-sort>

-->



<template>
  <div class="qm-sort">
    <div class="main" :style="`background: ${background}`">
      <slot></slot>
      <div class="triangle" :style="`background: ${background}`"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: "var(--color-fill-wrong)",
    },
  },
};
</script>

<style lang="less" scoped>
.qm-sort {
  width: calc(40px * var(--ratio));
  .main {
    width: calc(34px * var(--ratio));
    height: calc(34px * var(--ratio));
    line-height: calc(34px * var(--ratio));
    position: relative;
    border-radius: 1px;
    font-size: var(--font-size-subcontent-2);
    color: var(--color-text-base);
    text-align: center;
    .triangle {
      width: calc(15px * var(--ratio));
      height: calc(15px * var(--ratio));
      border-radius: 1px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(40%, -50%) rotate(45deg);
    }
  }
}
</style>